<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>V端数据可视化</title>
		<link type="text/css" rel="stylesheet" href="../../css/class/swiper.min.css" />
		<link type="text/css" rel="stylesheet" />
		<script type="text/javascript" src="../../js/class/jquery-3.3.1.min.js" charset="UTF-8"></script>
		<script type="text/javascript" src="../../js/class/swiper.min.js" charset="UTF-8"></script>
		<script type="text/javascript" src="../../js/class/swiper.animate.min.js"></script>
		<script type="text/javascript" src="../../js/class/vue.min.js" charset="UTF-8"></script>
		<style type="text/css">
			/* 基础css */
			* {margin: 0;padding: 0;}
			body {
				font-size: 100px;
			}
			.border {border: 1px white solid;}
			.main_container {position: absolute;width: 100%;height: 100%;min-height: 768px;}
			/* 全局性css */
			.line_gradient1 {
				background: -webkit-linear-gradient(60deg,#2D153F,#5A2D50);
				background: -o-linear-gradient(60deg,#2D153F,#5A2D50);
				background: -moz-linear-gradient(60deg,#2D153F,#5A2D50);
				background: linear-gradient(60deg,#2D153F,#5A2D50);
			}
			.line_gradient2 {
				background: -webkit-linear-gradient(#8C6D84,#5A2D50 10%,#5A2D50 90%,#8C6D84 100%);
				background: -o-linear-gradient(#8C6D84,#5A2D50 10%,#5A2D50 90%,#8C6D84 100%);
				background: -moz-linear-gradient(#8C6D84,#5A2D50 10%,#5A2D50 90%,#8C6D84 100%);
				background: linear-gradient(#8C6D84,#5A2D50 10%,#5A2D50 90%,#8C6D84 100%);
			}
			/* 头部css */
			.head_tr {height: 8%;width: 100%;justify-content: space-around;}
			.logo_container,.head_tr,.logo_input {display: flex;display: -ms-flexbox;display: -webkit-flex;}
			.logo_container,.time_container {width: 20%;height: 100%;}
			.title_container {width: 60%;font-size: 1.5rem;color: white;text-align: center;}
			.logo_input {height: 100%;font-size: 16px;text-align: center;align-items: center;}
			.logoImg {width: 80%;min-width: 220px;max-width: 260px;height: auto;}
			/* 主要部分css */
			.swiper_container {height: 87%;width: 96%;}
			.content_container {padding: ;width: calc(100% - 6rem);width: -moz-calc(100% - 6rem);width: -webkit-calc(100% - 6rem);}
			/* .content_container {width: 80%;} */
			/* 栅格横列设置 */
			.content_tr {display: flex;justify-content: space-between;}
			.ct_tr_1 {height: 100%}
			.ct_tr_1-5 {height: 66.666%}
			.ct_tr_2 {height: 50%}
			.ct_tr_3 {height: 33.333%}
			
			
			
			/* 栅格纵列设置 */
			.content_td_3 {width: 25%}
			.content_td_6 {width: 50%}
			.content_td_9 {width: 75%}
			.content_td_12 {width: 100%;}
			.content_td_3,.content_td_6,.content_td_9,.content_td_12 {height: 100%;}
			
			/*  */
			.part_container {padding: 0.5rem;height: calc(100% - 1rem);height: -moz-calc(100% - 1rem);height: -webkit-calc(100% - 1rem);}
			.page_cell {width: calc(100%-3rem);}
			.map_container {
				height: 100%;
			}
		</style>
	</head>
	<body>
		<div id="vue-app" class="main_container line_gradient1">
			<header class="head_tr">
				<div class="logo_container">
					<div class="logo_input">
						<a href="###" style="font-size: 0px;"><img class="logoImg" src="../../img/icon/ZYBankLoge.png"/></a>
					</div>
				</div>
				<div class="title_container">
					<div class="title_input">
						<div>{{title}}</div>
					</div>
				</div>
				<div class="time_container">
					<div class="time_input">
						
					</div>
				</div>
			</header>
			
			<div class="swiper-container swiper_container">
				<div class="swiper-wrapper content_container">
					<!-- 中原银行公司业务作战图1 -->
					<div class="swiper-slide page_cell">
						<div class="content_tr ct_tr_1-5">
							<!-- 上左 -->
							<div class="content_td_3">
								<div class="part_container">
									<div class="ct_tr_3 line_gradient2">
										
									</div>
									<div class="ct_tr_3 line_gradient2">
										
									</div>
									<div class="ct_tr_3 line_gradient2">
										
									</div>
								</div>
							</div>
							<!-- 上中 河南中原银行地图显示 -->
							<div class="content_td_6">
								<div class="part_container">
									<div class="map_container line_gradient2">
										
									</div>
								</div>
							</div>
							<!-- 上右 -->
							<div class="content_td_3">
								<div class="part_container">
									<div class="ct_tr_2 line_gradient2">
										
									</div>
									<div class="ct_tr_2 line_gradient2">
										
									</div>
								</div>
							</div>
						</div>
						<div class="content_tr ct_tr_3">
							<div class="content_td_6">
								<div class="part_container">
									<div class="ct_tr_1 line_gradient2">
										
									</div>
								</div>
							</div>
							<div class="content_td_6">
								<div class="part_container">
									<div class="ct_tr_1 line_gradient2">
										
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- 中原银行公司业务作战图2 -->
					<div class="swiper-slide">2</div>
					<!-- 中原银行公司业务作战图3 -->
					<div class="swiper-slide">3</div>
				</div>
				<!-- 分页器 -->
				<!-- <div class="swiper-pagination"></div> -->
				
			</div>
			<!-- 分页按钮 -->
			<div class="swiper-button-prev"></div>
			<div class="swiper-button-next"></div>
			
			<footer class="foot_tr">
				
			</footer>
		</div>
	</body>
	<script type="text/javascript">
		
		var vue = new Vue({
			el:".main_container",
			data:{
				title:"中原银行公司业务作战图",
			},
			mounted:function(){
				var swiper = new Swiper(".swiper-container",{
					autoplay: false,
					direction: 'horizontal', // 垂直切换选项
					loop: true, // 循环模式选项
					// 如果需要前进后退按钮
					navigation: {
						nextEl: '.swiper-button-next',
						prevEl: '.swiper-button-prev',
					},
					/* pagination: {
						el: '.swiper-pagination',
					}, */
				})
				console.log("swiper")
			},
		})
	</script>
</html>